<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习登录注册</title>
</head>
<body>
<!--表单form 
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get 提交方式
      get:我们在url中可以看到我们提交的信息,不安全,高效
      post:比较安全,传输大文件
-->

<h1>注册</h1>
<form action="1.我的第一个网页.html" method="get">
    <!--input标签
<input type="text">   input是一个文本框,
-->
<!--    输入框 value:表示元素初始值
   type为radio时必须指定一个值,maxlength:表示最多输入元素的长度,size表示表文本框的长度
 -->
    <p>名字: <input type="text" name="username" value="请输入名字" maxlength="8" size="15"> </p>
    <!--    密码框-->
    <p>密码: <input type="password" name="pwd"> </p>
<!--    radio单选框标签
    input type="radio"
    value:单选框的值
    name:表示组,name一样表示一个组,在一个组的时候只能选择一个,如性别
            <input type="radio" value="boy" name="gender1" checked>男 checked表示默认选中

 -->
    <p>
        <input type="radio" value="girl" name="gender1">女
        <input type="radio" value="boy" name="gender1" checked>男
    </p>
<!--多选框
  input type="checkbox"
-->
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="game" name="hobby">游戏
    <input type="checkbox" value="cheat" name="hobby">聊天
<!--按钮
        <input type="button" name="btn1" name="点击"> 普通按钮
        <input type="image" src="../resource/imag/1.jpg">图像按钮,点击图像也会实现和提交一样的效果
-->
    <p>
        <input type="button" name="btn1" value="点击点击点击">按钮
<!--        <input type="image" src="../resource/imag/1.jpg">-->
    </p>
    <hr>
<!--    下拉框
<select name="列表名称">
      <option value="etc" selected>瑞士</option>
      selected表示默认选中
  </select>
-->
<p>国家:
  <select  name="列表名称">
      <option value="china">中国</option>
      <option value="us">美国</option>
      <option value="etc" selected>瑞士</option>
      <option value="yindu">印度</option>
  </select>
</p>

<!--  文本域 
    <textarea name="textarea" cols="40" rows="20">文本内容</textarea>
    name不能少,cols表示列,rows表示行
-->
    <p>
        反馈:
        <textarea name="textarea" cols="40" rows="20">文本内容</textarea>
    </p>
    
<!--    文件域

-->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>
<!--    邮件验证-->
    <p>邮箱:
        <input type="email" name="email" >
    </p>
<!--    url验证-->
    <p> url:
        <input type="url" name="url" >
    </p>
<!--    数字-->
    <p>商品数量:
        <input type="number" name="number" value="0" max="100" min="0" step="2">
    </p>

<!--    滑块-->
    <p>音量:
        <input type="range"name="voice" min="o" max="100" step="2">
    </p>
<!--    搜索框-->
    <p>搜索:
        <input type="search" name="search">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
    <hr>
<!--    表单的应用-->
    <p>姓名:
<!--        readonly表示只读-->
        <input type="text" name="username2" value="admin" readonly id="mark">
        <input type="radio" name="sex">男
    </p>
    <p>性别:
<!--        disabled表示把选项变灰,不能进行选中-->
        <input type="radio" value="gir" name="sex">女
        <input type="radio"  value="b" name="sex" disabled>男
    </p>
<!--    hidden表示隐藏,-->
    <p>密码: <input type="password" name="pwd" hidden> </p>
<!--    增强鼠标的可用性<就是实现点击文字也能选中框.label标签
  for后面是所需增强的id名字,label中间的字表示,点击那些字就可以实现跳转到对应的框
-->
    <p>
        <label for="mark">点击试一试</label>
        <input type="text" >
    </p>
<!--    placeholder:文本框初始显示的值,不影响输入<提示信息>
   required:表示不能为空<非空判断>
   pattern:正则表达式<百度搜索常用正则表达式(脚本之家)>
-->
    <p>姓名:
        <input type="text" name="username3" placeholder="请输入名字" required>
    </p>
    <p>自定义邮箱:
        <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">

    </p>
</form>
</body>
</html>